<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站顶部导航样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
    }
    
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      color: #666;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 顶部导航通用样式 */
    .top-nav {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background-color: white;
      border-bottom: 1px solid #eee;
      position: relative;
      z-index: 100;
    }
    
    .nav-logo {
      font-size: 20px;
      font-weight: 700;
      color: #4263EB;
    }
    
    .nav-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 18px;
    }
    
    .nav-btn:hover {
      background-color: #f0f0f0;
    }
    
    .search-bar {
      flex: 1;
      margin: 0 12px;
      height: 36px;
      background-color: #f0f0f0;
      border-radius: 18px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      color: #999;
    }
    
    .search-bar i {
      margin-right: 8px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 70px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 风格1：经典Logo式 */
    #style1 .top-nav {
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    #style1 .nav-logo {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    #style1 .nav-logo i {
      font-size: 24px;
    }
    
    /* 风格2：搜索居中式 */
    #style2 .top-nav {
      padding: 0 12px;
    }
    
    #style2 .left-btns, #style2 .right-btns {
      display: flex;
    }
    
    /* 风格3：深色模式 */
    #style3 {
      background-color: #121212;
    }
    
    #style3 .content {
      background-color: #121212;
      color: #aaa;
    }
    
    #style3 .top-nav {
      background-color: #1e1e1e;
      border-bottom-color: #333;
    }
    
    #style3 .nav-btn, #style3 .search-bar, #style3 .nav-logo {
      color: #ddd;
    }
    
    #style3 .search-bar {
      background-color: #333;
    }
    
    #style3 .style-switcher {
      background-color: #1e1e1e;
    }
    
    /* 风格4：标签页式 */
    #style4 .top-nav {
      height: auto;
      flex-direction: column;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    
    #style4 .nav-tabs {
      display: flex;
      width: 100%;
      overflow-x: auto;
      padding: 0 16px;
      scrollbar-width: none;
    }
    
    #style4 .nav-tabs::-webkit-scrollbar {
      display: none;
    }
    
    #style4 .tab-item {
      padding: 6px 16px;
      font-size: 16px;
      font-weight: 500;
      color: #666;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      margin-right: 8px;
    }
    
    #style4 .tab-item.active {
      color: #4263EB;
      border-bottom-color: #4263EB;
    }
    
    #style4 .tab-actions {
      position: absolute;
      right: 16px;
      top: 14px;
    }
    
    /* 风格5：个人资料式 */
    #style5 .top-nav {
      flex-direction: column;
      height: auto;
      padding: 16px;
      align-items: flex-start;
      background: linear-gradient(135deg, #4263EB 0%, #6480F7 100%);
      color: white;
    }
    
    #style5 .user-info {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 16px;
    }
    
    #style5 .user-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid white;
      margin-right: 12px;
    }
    
    #style5 .user-details {
      flex: 1;
    }
    
    #style5 .user-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    #style5 .user-status {
      font-size: 14px;
      opacity: 0.9;
    }
    
    #style5 .stats {
      display: flex;
      width: 100%;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 8px;
    }
    
    #style5 .stat-item {
      flex: 1;
    }
    
    #style5 .stat-value {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    
    #style5 .stat-label {
      font-size: 12px;
      opacity: 0.9;
    }
    
    #style5 .nav-btn {
      color: white;
      position: absolute;
      top: 16px;
      right: 16px;
    }
    
    #style5 .nav-btn:hover {
      background-color: rgba(255,255,255,0.2);
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
    <button class="style-btn" data-style="style5">风格5</button>
  </div>
  
  <!-- 风格1：经典Logo式 -->
  <div id="style1" class="page-style active">
    <header class="top-nav">
      <button class="nav-btn">
        <i class="fa fa-bars"></i>
      </button>
      <div class="nav-logo">
        <i class="fa fa-connectdevelop"></i>
        <span>社交圈</span>
      </div>
      <button class="nav-btn">
        <i class="fa fa-envelope-o"></i>
      </button>
    </header>
    
    <div class="content">
      <div>
        <h3>经典Logo式顶部导航</h3>
        <p>左侧菜单按钮，中间品牌标识，右侧消息按钮</p>
      </div>
    </div>
  </div>
  
  <!-- 风格2：搜索居中式 -->
  <div id="style2" class="page-style">
    <header class="top-nav">
      <div class="left-btns">
        <button class="nav-btn">
          <i class="fa fa-user-o"></i>
        </button>
      </div>
      <div class="search-bar">
        <i class="fa fa-search"></i>
        <span>搜索朋友、话题或内容...</span>
      </div>
      <div class="right-btns">
        <button class="nav-btn">
          <i class="fa fa-plus-square-o"></i>
        </button>
        <button class="nav-btn">
          <i class="fa fa-bell-o"></i>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>搜索居中式顶部导航</h3>
        <p>左侧个人按钮，中间搜索栏，右侧功能按钮</p>
      </div>
    </div>
  </div>
  
  <!-- 风格3：深色模式 -->
  <div id="style3" class="page-style">
    <header class="top-nav">
      <button class="nav-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="nav-logo">聊天</div>
      <div>
        <button class="nav-btn">
          <i class="fa fa-phone"></i>
        </button>
        <button class="nav-btn">
          <i class="fa fa-video-camera"></i>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>深色模式顶部导航</h3>
        <p>深色背景设计，适合夜间使用场景</p>
      </div>
    </div>
  </div>
  
  <!-- 风格4：标签页式 -->
  <div id="style4" class="page-style">
    <header class="top-nav">
      <div class="nav-tabs">
        <div class="tab-item active">推荐</div>
        <div class="tab-item">关注</div>
        <div class="tab-item">热门</div>
        <div class="tab-item">附近</div>
        <div class="tab-item">话题</div>
      </div>
      <div class="tab-actions">
        <button class="nav-btn">
          <i class="fa fa-cog"></i>
        </button>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>标签页式顶部导航</h3>
        <p>多标签分类导航，支持横向滚动</p>
        <p>点击标签可切换内容分类</p>
      </div>
    </div>
  </div>
  
  <!-- 风格5：个人资料式 -->
  <div id="style5" class="page-style">
    <header class="top-nav">
      <button class="nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </button>
      <div class="user-info">
        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
        <div class="user-details">
          <div class="user-name">张小明</div>
          <div class="user-status">分享生活中的美好瞬间</div>
        </div>
      </div>
      <div class="stats">
        <div class="stat-item">
          <div class="stat-value">248</div>
          <div class="stat-label">动态</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">1.2k</div>
          <div class="stat-label">粉丝</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">356</div>
          <div class="stat-label">关注</div>
        </div>
      </div>
    </header>
    
    <div class="content">
      <div>
        <h3>个人资料式顶部导航</h3>
        <p>展示用户信息和统计数据</p>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 标签页点击事件
    document.querySelectorAll('.tab-item').forEach(item => {
      item.addEventListener('click', function() {
        // 移除其他标签的active类
        document.querySelectorAll('.tab-item').forEach(tab => {
          tab.classList.remove('active');
        });
        
        // 为当前点击标签添加active类
        this.classList.add('active');
        
        // 模拟内容切换
        const contentText = document.querySelector('#style4 .content p:last-child');
        contentText.textContent = `已切换到${this.textContent}分类`;
      });
    });
    
    // 导航按钮点击事件
    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i').className;
        let action = '';
        
        if (icon.includes('bars')) action = '菜单已打开';
        else if (icon.includes('envelope')) action = '消息中心已打开';
        else if (icon.includes('user')) action = '个人中心已打开';
        else if (icon.includes('plus')) action = '创建内容面板已打开';
        else if (icon.includes('bell')) action = '通知中心已打开';
        else if (icon.includes('arrow-left')) action = '已返回上一页';
        else if (icon.includes('phone')) action = '语音通话已发起';
        else if (icon.includes('video')) action = '视频通话已发起';
        else if (icon.includes('cog')) action = '设置页面已打开';
        else if (icon.includes('ellipsis')) action = '更多选项已打开';
        
        // 显示操作反馈
        const styleId = this.closest('.page-style').id;
        const contentArea = document.querySelector(`#${styleId} .content p:last-child`);
        if (contentArea) contentArea.textContent = action;
      });
    });
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'flex';
        style.style.flexDirection = 'column';
      }
    });
  </script>
</body>
</html>
